<!DOCTYPE html>
<!--声明 Thymeleaf 的命名空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- 引入bootstrap的css -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap.css"></link>
<link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap.css.map"></link>
<!-- 引入jquery的js  -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<!-- 引入bootstrap的js -->
<script type="text/javascript" src="../js/bootstrap/bootstrap3/js/bootstrap.js"></script>
<!-- 引入boostrap的表格的css、js -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap-table/bootstrap-table.css"></link>
<script type="text/javascript" src="../js/bootstrap/bootstrap-table/bootstrap-table.js"></script>
<script type="text/javascript" src="../js/bootstrap/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<!-- 引入bootbox弹框的js -->
<script type="text/javascript" src="../js/bootstrap/bootstrap-bootbox/bootbox.js"></script>
<!-- 引入bootbox时间 的css -->
<link rel="stylesheet" href="/js/bootstrap/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css"></link>
<!-- 引入bootbox时间 的js -->
<script type="text/javascript" src="/js/bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="/js/bootstrap/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<!-- 引入bootbox上传图片 的css -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap-fileinput/css/fileinput.css"></link>
<!-- 引入bootbox上传图片 的js -->
<script type="text/javascript" src="../js/bootstrap/bootstrap-fileinput/js/fileinput.js"></script>
<script type="text/javascript" src="../js/bootstrap/bootstrap-fileinput/js/locales/zh.js"></script>
<!-- 引入bootbox开关 按钮 的css -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap-switch-master/css/bootstrap3/bootstrap-switch.css"></link>
<body>

<button onclick="goupiao()" type="button" class="btn btn-danger">购票</button>




</body>
<script>

    $(function(){
        initPicture();
        dateTc();
        movieType();
    })

    function movieType(){
        $.ajax({
            url:"/sec/movieType",
            success:function(data){
                var str="<option value='-1'>未选择</option>"
                for (var i = 0; i < data.length; i++) {
                    str+="<option value='"+data[i].typeId+"'>"+data[i].typeName+"</option>"
                }
                $("#type").html(str);
            }

        })
    }
    function dateTc() {
        $('.date').datetimepicker({
            language: 'zh-CN',//显示中文
            format: 'yyyy-mm-dd',//显示格式
            minView: "month",//设置只显示到月份
            initialDate: new Date(),//初始化当前日期
            autoclose: true,//选中自动关闭
            todayBtn: true,//显示今日按钮
        })
    }

    function initPicture(){
        $('#myTable').bootstrapTable({
            toolbar:'#toolbar',//工具栏
            url:'/sec/findPicture',//获取数据地址
            pagination:true, //是否展示分页
            pageList:[2, 4, 6, 10],//分页组件
            pageNumber:1,//默认页码
            pageSize:2,//默认每页条数
            sidePagination:'server',//分页方式：client客户端分页，server服务端分页（*
            striped:true,//斑马线
            queryParams:function(){
            var movieName = $("#movieName").val();
            var type = $("#type").val();
            //alert(type)
                return {
                    page: this.pageNumber,
                    rows: this.pageSize,
                    movieName:movieName,
                    movieType:type,
                };
            },
            columns:[
                {field:"checkbox",checkbox:true},
                {field:"movieId",title:"ID"},
                {field:"movieName",title:"电影名称"},
                {field:"typename",title:"电影类型"},
                {field:"director",title:"导演名称"},
                {field:"actor",title:"主演名称"},
                {field:"filmSchedule",title:"影片排期"},
                {field:"img",title:"封面",formatter:function(value,row,index){
                        return "<img src='../"+value+"' width='50px' height='50px' class='img-circle'>";
                    }},
                {field:"tool",title:"操作",formatter:function(value,row,index){

                        var str="";
                        str+="<button onclick='del("+row.movieId+")' class='btn btn‐primary glyphicon glyphicon‐se arch' type='button'>删除</button>";
                        str+="<button onclick='update("+row.movieId+")' class='btn btn‐primary glyphicon glyphicon‐se arch' type='button'>修改</button>";
                        return str;
                    }},
            ]
        })
    }


    search=function () {
        $('#myTable').bootstrapTable("refresh");
    }

    //删除
    del=function (ids) {
        $.ajax({
            url:"/sec/del",
            data:{ids:ids},
            success:function () {
                $('#myTable').bootstrapTable("refresh");
            }
        })
    }

    var res;
    function createAddContent(url){
        $.ajax({
            url:url,
            async:false,//同步
            success:function(data){
                res = data;
            }
        });
        return res;
    }

    //新增弹框
    function add(){
        bootbox.dialog({
            title:'新增用户',
            message: createAddContent("/addMovie"),
            closeButton: true,
            buttons : {
                "success" : {
                    "label" : "<i class='icon-ok'></i> 保存",
                    "className" : "btn-sm btn-success",
                    "callback" : function() {//回调函数
                        //提交表单
                        $.ajax({
                            url:"/sec/addMovie",
                            type:'post',
                            data:$("#addForm").serialize(),//表单序列化
                            success:function(data){
                                //刷新表格
                                $('#myTable').bootstrapTable('refresh');
                            }
                        });
                    }
                },
                "cancel" : {
                    "label" : "<i class='icon-info'></i> 取消",
                    "className" : "btn-sm btn-danger"
                }
            }

        });
    }

    //修改
    function update(ids){
        bootbox.dialog({
            title:'新增用户',
            message: createAddContent("/addMovie"),
            closeButton: true,
            buttons : {
                "success" : {
                    "label" : "<i class='icon-ok'></i> 保存",
                    "className" : "btn-sm btn-success",
                    "callback" : function() {//回调函数
                        //提交表单
                        $.ajax({
                            url:"/sec/addMovie",
                            type:'post',
                            data:$("#addForm").serialize(),//表单序列化
                            success:function(data){
                                //刷新表格
                                $('#myTable').bootstrapTable('refresh');
                            }
                        });
                    }
                },
                "cancel" : {
                    "label" : "<i class='icon-info'></i> 取消",
                    "className" : "btn-sm btn-danger"
                }
            }

        });
//回显
        $.ajax({
            url:"/sec/movieQuery",
            data:{ids:ids},//表单序列化
            success:function(data){
              $("#movieId").val(data.movieId);
              $("#name").val(data.movieName);
              $("#movieType").val(data.movieType);
              $("#director").val(data.director);
              $("#actor").val(data.actor);
              $("#filmSchedule").val(data.filmSchedule);
            }
        });

    }




    //上传图片
    function uploadImg(url){
        $('#userImg').fileinput({
            initialPreview:url,//初始化图片配置：
            initialPreviewConfig: [ {key: 1, showDelete: false} ],
            //是否初始化图片显示
            initialPreviewAsData: true,
            language: 'zh', //设置语言
            uploadUrl: 'account/uploadImg', //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: false,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式
            //dropZoneEnabled: false,//是否显示拖拽区域
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 1000,//图片的最大宽度
            //maxImageHeight: 1000,//图片的最大高度
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            //minFileCount: 0,
            maxFileCount: 2, //表示允许同时上传的最大文件个数
            enctype: 'multipart/form-data', //content-type
            validateInitialCount:true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

        }).on('fileuploaded', function(event, data, previewId, index) {
            var	imgval =data.response.responseText;
            $('#testimg').val(imgval);
        });
    }



    goupiao=function () {
        var ids=1;
        location.href="/buy/goupiao?ids="+ids;
    }











</script>
</html>